Selecciones y join de datos en D3.js

IIC2026 2020-2

Join de datos en D3.js I

Selecciones y join de datos en D3.js

IIC2026 2020-2

Vincular datos con elementos

Podemos generar un vínculo de marcas y canales con datos mediante código.


<svg>
  <rect></rect>
  <circle></circle>
  <path></path>
</svg>


<svg>
  <rect></rect>
  <circle></circle>
  <path></path>
</svg>


            const datos = [23, 45, 120, 64];


<svg>
  <rect></rect>
  <circle></circle>
  <path></path>
</svg>


            const datos = [
              {nombre: "Ana", edad: 23},
              {nombre: "Bea", edad: 44},
              ...
            ];


<svg id="svg" width="400" height="250">
  <rect></rect>
  <rect></rect>
  <rect></rect>
  <rect></rect>
</svg>


<svg id="svg" width="400" height="250">
  <rect></rect>
  <rect></rect>
  <rect></rect>
  <rect></rect>
</svg>


            d3.select("#svg")
              .selectAll("rect");


<svg id="svg" width="400" height="250">
  <rect></rect>
  <rect></rect>
  <rect></rect>
  <rect></rect>
</svg>


            d3.select("#svg")
              .selectAll("rect");

`seleccion.data`


            const datos = [23, 45, 120, 64];

            d3.select("#svg")
              .selectAll("rect")
              .data(datos);

`seleccion.data`


            const datos = [23, 45, 120, 64];

            d3.select("#svg")
              .selectAll("rect")
              .data(datos);

Hay datos que no se le asocian elementos
Hay elementos y datos que se asocian entre ellos
Hay elementos que no se le asocian datos

`seleccion.data`


            const datos = [23, 45, 120, 64];

            d3.select("#svg")
              .selectAll("rect")
              .data(datos);

Hay datos que no se le asocian elementos ➡️ enter
Hay elementos y datos que se asocian entre ellos ➡️ update
Hay elementos que no se le asocian datos ➡️ exit

`seleccion.data`

Hay datos que no se le asocian elementos ➡️ enter
Hay elementos y datos que se asocian entre ellos ➡️ update
Hay elementos que no se le asocian datos ➡️ exit

Update


            const datos = [23, 45, 120, 64];

            d3.select("#svg")
              .selectAll("rect")
              .data(datos);


            <svg id="svg" width="400" height="250">
              <rect></rect> <!-- 23 -->
              <rect></rect> <!-- 45 -->
              <rect></rect> <!-- 120 -->
              <rect></rect> <!-- 64 -->
            </svg>

Update


            const datos = [23, 45, 120, 64];

            const update = d3.select("#svg")
              .selectAll("rect")
              .data(datos);


            <svg id="svg" width="400" height="250">
              <rect></rect> <!-- 23 -->
              <rect></rect> <!-- 45 -->
              <rect></rect> <!-- 120 -->
              <rect></rect> <!-- 64 -->
            </svg>

Update


            const datos = [23, 45, 120, 64];

            const update = d3.select("#svg")
              .selectAll("rect")
              .data(datos);

            update.attr("width", 50)
              .attr("y", 0)
              .attr("x", (d, i, all) => i * 100);


            <svg id="svg" width="400" height="250">
              <rect></rect> <!-- 23 -->
              <rect></rect> <!-- 45 -->
              <rect></rect> <!-- 120 -->
              <rect></rect> <!-- 64 -->
            </svg>

Update


            const datos = [23, 45, 120, 64];

            const update = d3.select("#svg")
              .selectAll("rect")
              .data(datos);
            
            update.attr("width", 50)
              .attr("y", 0)
              .attr("x", (d, i, all) => i * 100);


            <svg id="svg" width="400" height="250">
              <rect width="50" y="0" x="0"></rect> <!-- 23 -->
              <rect width="50" y="0" x="100"></rect> <!-- 45 -->
              <rect width="50" y="0" x="200"></rect> <!-- 120 -->
              <rect width="50" y="0" x="300"></rect> <!-- 64 -->
            </svg>

Update


            const datos = [23, 45, 120, 64];

            const update = d3.select("#svg")
              .selectAll("rect")
              .data(datos);
            
            update.attr("width", 50)
              .attr("y", 0)
              .attr("x", (d, i, all) => i * 100)
              .attr("height", (d, i, all) => 2 * d);


            <svg id="svg" width="400" height="250">
              <rect width="50" y="0" x="0"></rect> <!-- 23 -->
              <rect width="50" y="0" x="100"></rect> <!-- 45 -->
              <rect width="50" y="0" x="200"></rect> <!-- 120 -->
              <rect width="50" y="0" x="300"></rect> <!-- 64 -->
            </svg>

Update


            const datos = [23, 45, 120, 64];

            const update = d3.select("#svg")
              .selectAll("rect")
              .data(datos);
            
            update.attr("width", 50)
              .attr("y", 0)
              .attr("x", (d, i, all) => i * 100)
              .attr("height", (d, i, all) => 2 * d);


            <svg id="svg" width="400" height="250">
              <rect width="50" y="0" x="0" height="46"></rect> <!-- 23 -->
              <rect width="50" y="0" x="100" height="90"></rect> <!-- 45 -->
              <rect width="50" y="0" x="200" height="240"></rect> <!-- 120 -->
              <rect width="50" y="0" x="300" height="128"></rect> <!-- 64 -->
            </svg>

Update


            const datos = [23, 45, 120, 64];

            const update = d3.select("#svg")
              .selectAll("rect")
              .data(datos);
            
            update.attr("width", 50)
              .attr("y", 0)
              .attr("x", (d, i, all) => i * 100)
              .attr("height", (d, i, all) => 2 * d);

Exit


            <svg id="svg" width="400" height="250">
              <rect></rect>
              <rect></rect>
              <rect></rect>
              <rect></rect>
            </svg>


            const datos = [23, 45];

            d3.select("#svg")
              .selectAll("rect")
              .data(datos);


            <svg id="svg" width="400" height="250">
              <rect></rect> <!-- 23 -->
              <rect></rect> <!-- 45 -->
              <rect></rect> <!-- ? -->
              <rect></rect> <!-- ? -->
            </svg>

Exit


            <svg id="svg" width="400" height="250">
              <rect></rect>
              <rect></rect>
              <rect></rect>
              <rect></rect>
            </svg>


            const datos = [23, 45];

            const update = d3.select("#svg")
              .selectAll("rect")
              .data(datos);

            update.exit().remove();


            <svg id="svg" width="400" height="250">
              <rect></rect> <!-- 23 -->
              <rect></rect> <!-- 45 -->
              <rect></rect> <!-- ? -->
              <rect></rect> <!-- ? -->
            </svg>

Exit


            <svg id="svg" width="400" height="250">
              <rect></rect>
              <rect></rect>
              <rect></rect>
              <rect></rect>
            </svg>


            const datos = [23, 45];

            const update = d3.select("#svg")
              .selectAll("rect")
              .data(datos);

            update.exit().remove();


            <svg id="svg" width="400" height="250">
              <rect></rect> <!-- 23 -->
              <rect></rect> <!-- 45 -->
            </svg>

Enter


            <svg id="svg" width="400" height="250">
            </svg>


            const datos = [23, 45, 120, 64];

            d3.select("#svg")
              .selectAll("rect")
              .data(datos);


            <svg id="svg" width="400" height="250">
              <!-- ? -->
            </svg>

Enter


            <svg id="svg" width="400" height="250">
            </svg>


            const datos = [23, 45, 120, 64];

            d3.select("#svg")
              .selectAll("rect")
              .data(datos)
              .enter();


            <svg id="svg" width="400" height="250">
              <!-- ? -->
            </svg>

Enter


            <svg id="svg" width="400" height="250">
            </svg>


            const datos = [23, 45, 120, 64];

            d3.select("#svg")
              .selectAll("rect")
              .data(datos)
              .enter()
              .append("rect");


            <svg id="svg" width="400" height="250">
              <!-- ? -->
            </svg>

Enter


            <svg id="svg" width="400" height="250">
            </svg>


            const datos = [23, 45, 120, 64];

            d3.select("#svg")
              .selectAll("rect")
              .data(datos)
              .enter()
              .append("rect");


            <svg id="svg" width="400" height="250">
              <rect></rect> <!-- 23 -->
              <rect></rect> <!-- 45 -->
              <rect></rect> <!-- 120 -->
              <rect></rect> <!-- 64 -->
            </svg>

Enter


            const datos = [23, 45, 120, 64];

            d3.select("#svg")
              .selectAll("rect")
              .data(datos)
              .enter()
              .append("rect")
              .attr("width", 50)
              .attr("y", 0)
              .attr("x", (d, i, all) => i * 100)
              .attr("height", (d, i, all) => 2 * d);


            <svg id="svg" width="400" height="250">
              <rect></rect> <!-- 23 -->
              <rect></rect> <!-- 45 -->
              <rect></rect> <!-- 120 -->
              <rect></rect> <!-- 64 -->
            </svg>

Enter


            const datos = [23, 45, 120, 64];

            d3.select("#svg")
              .selectAll("rect")
              .data(datos)
              .enter()
              .append("rect")
              .attr("width", 50)
              .attr("y", 0)
              .attr("x", (d, i, all) => i * 100)
              .attr("height", (d, i, all) => 2 * d);


            <svg id="svg" width="400" height="250">
              <rect width="50" y="0" x="0" height="46"></rect> <!-- 23 -->
              <rect width="50" y="0" x="100" height="90"></rect> <!-- 45 -->
              <rect width="50" y="0" x="200" height="240"></rect> <!-- 120 -->
              <rect width="50" y="0" x="300" height="128"></rect> <!-- 64 -->
            </svg>


const svg = d3.select("body").append("svg");

const datos = [150, 256, 130, 0, 23, 422, 235];

svg.attr("width", 50 + datos.length * 100).attr("height", 500);

svg
  .selectAll("rect")
  .data(datos)
  .enter()
  .append("rect")
  .attr("width", 50)
  .attr("fill", "magenta")
  .attr("height", (d) => d)
  .attr("x", (_, i) => 50 + i * 100);

Join de datos en D3.js I

Selecciones y join de datos en D3.js

Selecciones y join de datos en D3.js

IIC2026 2020-2

Join de datos en D3.js I

Selecciones y join de datos en D3.js

IIC2026 2020-2

Vincular datos con elementos

Vincular datos con elementos

seleccion.data

seleccion.data

seleccion.data

seleccion.data

Update

Update

Update

Update

Update

Update

Update

Exit

Exit

Exit

Enter

Enter

Enter

Enter

Enter

Enter

Join de datos en D3.js I

Selecciones y join de datos en D3.js

IIC2026 2020-2

¡Deja tus preguntas en los comentarios!

`seleccion.data`

`seleccion.data`

`seleccion.data`

`seleccion.data`